import React from 'react';
import { View } from 'react-native';
import {
  List, Picker, Provider, Button,
} from '@ant-design/react-native';

const data = [{
  label: '北京市',
  value: '11',
  children: [{
    label: '市辖区',
    value: '1101',
    children: [{
      label: '东城区',
      value: '110101',
    },
    {
      label: '西城区',
      value: '110102',
    },
    {
      label: '朝阳区',
      value: '110105',
    },
    {
      label: '丰台区',
      value: '110106',
    },
    {
      label: '石景山区',
      value: '110107',
    },
    {
      label: '海淀区',
      value: '110108',
    },
    {
      label: '门头沟区',
      value: '110109',
    },
    {
      label: '房山区',
      value: '110111',
    },
    {
      label: '通州区',
      value: '110112',
    },
    {
      label: '顺义区',
      value: '110113',
    },
    {
      label: '昌平区',
      value: '110114',
    },
    {
      label: '大兴区',
      value: '110115',
    },
    {
      label: '怀柔区',
      value: '110116',
    },
    {
      label: '平谷区',
      value: '110117',
    },
    {
      label: '密云区',
      value: '110118',
    },
    {
      label: '延庆区',
      value: '110119',
    }],
  }],
}];

// import district from './location';

export default class MyPicker extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = () => {
      setTimeout(() => {
        this.setState({
          data,
        });
      }, 500);
    };
    this.onChange = (value) => {
      this.setState({ value });
    };
    this.state = {
      data: [],
      value: [],
    };
  }

  render() {
    return (
      <Provider>
        <View style={{ marginTop: 30 }}>
          <List>
            <Picker
              data={data}
              cols={3}
              value={this.state.value}
              onChange={this.onChange}
            >
              <List.Item onPress={this.onPress}>省市选择</List.Item>
            </Picker>
          </List>
        </View>
        <View>
          <Picker
            data={data}
            cols={3}
            value={this.state.value}
            onChange={this.onChange}
          >
            <Button onPress={this.onPress}>省市选择</Button>
          </Picker>
        </View>
      </Provider>
    );
  }
}
